<template>
  <div class="screen-container" ref="screenRef">
    <!-- 1. 顶部：庆典横幅 -->
    <header class="header">
      <div class="header-decoration left"></div>
      <h1 class="title">荆楚欢歌 · 2025节日庆典实时图</h1>
      <div class="header-decoration right"></div>
      <div class="header-actions">
        <div class="time-display">{{ currentTime }}</div>
        <button class="fullscreen-btn" @click="toggleFullscreen">{{ isFullscreen ? '退出全屏' : '全屏' }}</button>
      </div>
    </header>

    <!-- 主体内容 -->
    <div class="main-content">
      
      <!-- 2. 左侧：活动概览看板 -->
      <aside class="panel left-panel">
        <div class="panel-title">
          <span class="icon">🏮</span> 活动热度排行
        </div>
        <div class="panel-body">
          <div class="stat-item" v-for="(item, index) in hotCities" :key="index">
            <span class="rank" :class="'top-' + (index + 1)">{{ index + 1 }}</span>
            <span class="city-name">{{ item.name }}</span>
            <div class="bar-container">
              <div class="bar" :style="{ width: item.value + '%' }"></div>
            </div>
            <span class="value">{{ item.count }}场</span>
          </div>
        </div>
        
        <div class="panel-title mt-20">
          <span class="icon">📊</span> 实时数据
        </div>
        <div class="data-grid">
          <div class="data-box">
            <div class="num">1,208</div>
            <div class="label">今日活动</div>
          </div>
          <div class="data-box">
            <div class="num">35W+</div>
            <div class="label">参与人数</div>
          </div>
        </div>
      </aside>

      <!-- 3. 中部：核心地图 (ECharts) -->
      <section class="map-container">
        <div ref="chartRef" class="echarts-map"></div>
        <!-- 装饰性光效底座 -->
        <div class="map-base"></div>
      </section>

      <!-- 4. 右侧：实时动态看板 -->
      <aside class="panel right-panel">
        <div class="panel-title">
          <span class="icon">🧨</span> 实时活动播报
        </div>
        <div class="panel-body scroll-list">
          <div class="news-item" v-for="(news, index) in newsList" :key="index">
            <div class="time">{{ news.time }}</div>
            <div class="content">
              <span class="tag">进行中</span>
              {{ news.content }}
            </div>
          </div>
        </div>
        
        <div class="panel-title mt-20">
          <span class="icon">☁️</span> 节日天气
        </div>
        <div class="weather-box">
          <div class="temp">24°C</div>
          <div class="desc">武汉 - 晴朗微风 (适宜出行)</div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import hubeiGeoJson from '../../assets/maps/hubei-420000_full.json';

// --- 数据状态 ---
const chartRef = ref(null);
let myChart = null;
const currentTime = ref('');
const screenRef = ref(null);
const isFullscreen = ref(false);
const onFsChange = () => {
  isFullscreen.value = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
};

// 模拟左侧数据
const hotCities = ref([
  { name: '武汉', value: 95, count: 342 },
  { name: '宜昌', value: 80, count: 128 },
  { name: '襄阳', value: 75, count: 110 },
  { name: '十堰', value: 60, count: 85 },
  { name: '荆州', value: 55, count: 76 },
]);

// 模拟右侧数据
const newsList = ref([
  { time: '10:30', content: '武汉江汉路开启民俗巡游活动' },
  { time: '10:25', content: '宜昌三峡人家举办大型灯会' },
  { time: '10:15', content: '襄阳唐城夜游活动门票售罄' },
  { time: '10:05', content: '恩施土家女儿城篝火晚会筹备中' },
  { time: '09:50', content: '黄石矿山公园开启亲子寻宝节' },
]);

// --- 时间更新逻辑 ---
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleString('zh-CN', { hour12: false });
};
let timer = setInterval(updateTime, 1000);

// --- ECharts 地图逻辑 ---
const initMap = async () => {
  if (!chartRef.value) return;
  
  myChart = echarts.init(chartRef.value);
  
  // 显示加载动画
  myChart.showLoading({
    text: '正在加载荆楚大地...',
    color: '#F7EED6',
    textColor: '#F7EED6',
    maskColor: 'rgba(0, 0, 0, 0.2)',
  });

  try {
    const geoJson = hubeiGeoJson;
    myChart.hideLoading();
    echarts.registerMap('hubei', geoJson);

    // 设置地图配置项
    const option = {
      backgroundColor: 'transparent', // 背景透明，使用 CSS 背景
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(50, 0, 0, 0.9)',
        borderColor: '#F7EED6',
        textStyle: { color: '#fff' },
        formatter: function (params) {
          if (params.seriesType === 'effectScatter') {
            return `<div style="text-align:center; font-weight:bold">${params.data.name}</div>
                    <div style="color:#F7EED6">活动热度: ${params.data.value[2]}</div>
                    <div>正在进行: ${params.data.activity}</div>`;
          }
          return params.name;
        }
      },
      geo: {
        map: 'hubei',
        roam: true, // 允许缩放平移
        zoom: 1.1,
        label: {
          show: true,
          color: '#F7EED6', // 金色文字
          fontSize: 10
        },
        itemStyle: {
          areaColor: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [{
                offset: 0, color: '#B71C1C' // 深红
            }, {
                offset: 1, color: '#4A0404' // 暗红
            }]
          },
          borderColor: '#F7EED6', // 金色边框
          borderWidth: 1.5,
          shadowColor: 'rgba(255, 215, 0, 0.5)',
          shadowBlur: 10
        },
        emphasis: {
          itemStyle: {
            areaColor: '#E60012', // 高亮时的中国红
            shadowBlur: 20
          },
          label: { color: '#fff' }
        }
      },
      series: [
        {
          // 气泡特效层 (effectScatter)
          name: '节日庆典',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: [
            { name: '武汉', value: [114.305, 30.593, 100], activity: '长江灯光秀' },
            { name: '宜昌', value: [111.286, 30.692, 80], activity: '三峡大坝游园' },
            { name: '襄阳', value: [112.121, 32.008, 85], activity: '古城墙烟花' },
            { name: '恩施', value: [109.48, 30.27, 70], activity: '大峡谷民歌会' },
            { name: '荆州', value: [112.23, 30.33, 60], activity: '关公义园庙会' },
            { name: '黄石', value: [115.03, 30.20, 50], activity: '矿冶文化节' },
            { name: '十堰', value: [110.79, 32.64, 65], activity: '武当山祈福' }
          ],
          symbolSize: function (val) {
            return val[2] / 4; // 根据热度值决定气泡大小
          },
          showEffectOn: 'render', // 渲染完就显示特效
          rippleEffect: {
            brushType: 'stroke', // 波纹绘制方式
            scale: 3, // 波纹扩散范围
            period: 4 // 扩散速度
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: false
          },
          itemStyle: {
            color: '#FFD700', // 气泡主体颜色 (金)
            shadowBlur: 10,
            shadowColor: '#FFD700'
          },
          zlevel: 1
        }
      ]
    };

    myChart.setOption(option);
    
    // 自动轮播 tooltip 增加动态感
    let index = 0;
    setInterval(() => {
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      });
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      });
      // 取消上一个高亮
      if (index > 0) {
        myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: index - 1 });
      } else {
        myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 6 });
      }
      
      index = (index + 1) % 7;
    }, 3000);

  } catch (error) {
    console.error("地图数据加载失败:", error);
  }
};

onMounted(() => {
  updateTime();
  initMap();
  window.addEventListener('resize', () => myChart && myChart.resize());
  window.addEventListener('fullscreenchange', onFsChange);
  window.addEventListener('webkitfullscreenchange', onFsChange);
  window.addEventListener('msfullscreenchange', onFsChange);
  
  
});

onUnmounted(() => {
  clearInterval(timer);
  if (myChart) myChart.dispose();
  window.removeEventListener('fullscreenchange', onFsChange);
  window.removeEventListener('webkitfullscreenchange', onFsChange);
  window.removeEventListener('msfullscreenchange', onFsChange);
});

const toggleFullscreen = async () => {
  try {
    if (!isFullscreen.value) {
      const el = screenRef.value || document.documentElement;
      if (el.requestFullscreen) await el.requestFullscreen();
      else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
      else if (el.msRequestFullscreen) el.msRequestFullscreen();
    } else {
      if (document.exitFullscreen) await document.exitFullscreen();
      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      else if (document.msExitFullscreen) document.msExitFullscreen();
    }
  } catch (e) {}
};
</script>

<style scoped>
/* 
  配色方案：
  背景深色：#2c0a0d (深红黑)
  辅助红：#8e0000
  高亮金：#F7EED6 (香槟金)
  文字白：#ffffff
*/

.screen-container {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at center, #5a1115 0%, #1a0204 100%);
  color: #fff;
  overflow: hidden;
  font-family: "Microsoft YaHei", sans-serif;
  display: flex;
  flex-direction: column;
}

/* --- 顶部 Header --- */
.header {
  height: 80px;
  position: relative;
  background: url('https://img.alicdn.com/tfs/TB1Lw6eRXXXXXcRXpXXXXXXXXXX-1920-103.png') no-repeat center bottom; /* 这是一个常用的DataV Header背景素材，若失效可用CSS渐变代替 */
  background-size: 100% 100%;
  text-align: center;
  z-index: 10;
}

.title {
  font-size: 32px;
  line-height: 70px;
  margin: 0;
  color: #F7EED6;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  letter-spacing: 4px;
  font-weight: bold;
}

.header-actions {
  position: absolute;
  right: 30px;
  top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-display {
  font-size: 18px;
  color: #F7EED6;
  font-family: monospace;
}

.fullscreen-btn {
  background: transparent;
  color: #F7EED6;
  border: 1px solid rgba(247, 238, 214, 0.6);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.fullscreen-btn:hover {
  background: rgba(247, 238, 214, 0.15);
}

/* --- 主体布局 --- */
.main-content {
  flex: 1;
  display: flex;
  padding: 10px 20px 20px;
  gap: 20px;
}

/* --- 左右面板通用样式 --- */
.panel {
  width: 25%;
  background: rgba(40, 10, 10, 0.6);
  border: 1px solid rgba(247, 238, 214, 0.3);
  box-shadow: 0 0 20px rgba(230, 0, 18, 0.1) inset;
  padding: 20px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(5px);
  border-radius: 8px;
}

.panel-title {
  font-size: 20px;
  color: #F7EED6;
  border-bottom: 2px solid rgba(230, 0, 18, 0.5);
  padding-bottom: 10px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.panel-title .icon {
  margin-right: 10px;
  filter: drop-shadow(0 0 5px #ff0000);
}

.mt-20 { margin-top: 20px; }

/* 左侧排行样式 */
.stat-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.rank {
  width: 20px;
  height: 20px;
  background: #555;
  text-align: center;
  line-height: 20px;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 12px;
}

.rank.top-1 { background: #FFD700; color: #000; }
.rank.top-2 { background: #C0C0C0; color: #000; }
.rank.top-3 { background: #B87333; color: #000; }

.city-name { width: 50px; font-size: 14px; }

.bar-container {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 10px;
  border-radius: 4px;
  overflow: hidden;
}

.bar {
  height: 100%;
  background: linear-gradient(90deg, #E60012, #FFD700);
  border-radius: 4px;
}

.value { width: 40px; text-align: right; font-size: 12px; color: #aaa; }

.data-grid {
  display: flex;
  justify-content: space-between;
}
.data-box {
  background: rgba(0,0,0,0.3);
  width: 48%;
  text-align: center;
  padding: 15px 0;
  border: 1px solid #8e0000;
}
.data-box .num {
  font-size: 24px;
  color: #FFD700;
  font-weight: bold;
}
.data-box .label { font-size: 12px; color: #ccc; margin-top: 5px; }

/* 右侧列表样式 */
.scroll-list {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.news-item {
  display: flex;
  font-size: 14px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.news-item .time { color: #aaa; margin-right: 10px; font-family: monospace; }
.news-item .tag { 
  background: #E60012; 
  padding: 2px 5px; 
  border-radius: 3px; 
  font-size: 10px; 
  margin-right: 5px;
}

/* --- 中间地图容器 --- */
.map-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.echarts-map {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.map-base {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100px;
  background: radial-gradient(ellipse at center, rgba(230,0,18,0.3) 0%, rgba(0,0,0,0) 70%);
  z-index: 1;
  filter: blur(20px);
}
</style>
